<!DOCTYPE html>
<html>
<head>
    <title>CSS Flexbox Test: flex:auto - applying to all items</title>
    <link rel="author" title="Bora Vuth" href="mailto:vbora85@gmail.com">
    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-common">
    <meta name="assert" content="Test passes if all boxes are not 100px width; and box3 start position is the same X axis as box1's and position is the same as box2">
    <style type="text/css">
        #flexContainer {
			background: blue;
			margin: 10px 0;
			border: 1px solid black;
			height: 200px;
			width: 300px;

			display: flex;
			flex-wrap: wrap;
			align-content: center;
         }
		 .item{
			flex:auto;
			background: white;
			margin: 0 20px 10px 10px;
			width: 100px;
			height: 40px;
			display: inline-block;
		 }
    </style>
</head>
<body>
    <p>Test passes if all boxes are not 100px width; and box3 start position is the same X axis as box1's and position is the same as box2</p>
		<div id="flexContainer">
			<div class="item">box1</div>		
			<div class="item">box2</div>
			<div class="item">box3</div>
		</div>
</body>
</html>

